<template>
  <div>
    <el-dialog
      :close-on-click-modal="false"
      title="标签设置"
      :beforeClose="handleClose"
      :visible.sync="dialogVisible"
      width="500px">
      <el-form :model="sendForm" size="mini" label-width="130px" ref="sendFormRef">
          <div v-for="item in setList" :key="item.className" style="margin-bottom: 20px">
              <div style="font-weight: bold;margin-bottom:10px">
                {{item.className}}
                <el-button v-if="item.isMultiSelect == 0" type="text" size="small" @click="item.chooseList = ''">清除</el-button>
              </div>
              <div v-if="item.isMultiSelect == 0">
                <el-radio-group v-model="item.chooseList">
                  <el-radio :label="ee.tagId" v-for="ee in item.list" :key="ee.tagId">{{ee.tagName}}</el-radio>
                </el-radio-group>
              </div>
            <div v-else-if="item.isMultiSelect == 1">
              <el-checkbox-group v-model="item.chooseList">
                <el-checkbox :label="ee.tagId" v-for="ee in item.list" :key="ee.tagId">{{ee.tagName}}</el-checkbox>
              </el-checkbox-group>
            </div>
          </div>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleConfirm" :loading="btnLoading">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  customerTagConfig,
  customerTagList,
  customerTagEdit,
} from '@/api/company';


const defaultsendForm = {
  customerId:'',
  tagIds:[],//社会统一信用码
};
export default {
  name: "setLabel",
  data() {
    return {
      sendForm:JSON.parse(JSON.stringify(defaultsendForm)),
      customerId: '',
      dialogVisible: false,
      btnLoading: false,
      setList:[],
      chooseList:[],
    }
  },
  filters:{

  },
  created() {
  },
  methods: {
    getcustomerTagConfig(){
      customerTagConfig().then((res)=>{
        res.forEach((el)=>{
          let elList = el.list.map(item=>item.tagId)
          if(el.isMultiSelect == 1){
            el.chooseList = this.findCommonElements(this.chooseList,elList)
          }else{
            let list = this.findCommonElements(this.chooseList,elList)
            el.chooseList = list.length > 0 ? list[0] : ''
          }
        })
        this.setList = res
        console.log("this.setList",this.setList)
      })
    },
    //找出两个数组中相同的元素,放在一个新数组里
    findCommonElements(arr1, arr2) {
        // 使用Set提高查找效率
        const set1 = new Set(arr1);
        const commonElements = [];
        // 遍历第二个数组，检查是否存在于第一个数组中
        for (const item of arr2) {
          if (set1.has(item)) {
            commonElements.push(item);
          }
        }
        // 返回去重后的结果
        return [...new Set(commonElements)];
    },

    getcustomerTagList(){
     return  customerTagList({customerId:this.customerId}).then((res)=>{
        this.chooseList = res.map(item => item.tagId)
         console.log(this.chooseList)
      })
    },

    //显示
    showPop(id) {
      this.customerId = id
      this.dialogVisible = true;
      this.getcustomerTagList().then(()=>{
        this.getcustomerTagConfig();
      });
    },
    //关闭
    handleClose() {
      this.$refs.sendFormRef.clearValidate();
      this.dialogVisible = false;
      this.btnLoading = false;
    },

    //提交
    handleConfirm() {
      this.$refs.sendFormRef.validate((valid) => {
        if (valid) {
          this.btnLoading = true;
          const data = {}
          data.customerId = this.customerId
          data.tagIds = []
          this.setList.forEach((el)=>{
            if(el.chooseList != ''){
              data.tagIds = data.tagIds.concat(el.chooseList)
            }
          })
          customerTagEdit(data).then(() => {
            this.btnLoading = false;
            this.$message.success('操作成功')
            this.handleClose();
            this.$emit('getList')
          }).catch(() => {
            this.btnLoading = false;
          })
        }
      });
    },
  }
};
</script>

<style scoped lang="scss">

</style>
